<template>
  <m-page>
    <m-header>
      <!-- 头部区域 -->
      <div class="g-header">
        <div class="g-header-title">
          <ynet-cell-item title="长湘贷信用卡（尾号1234）">
            <template slot="left">
              <div class="g-header-icon"></div>
            </template>
          </ynet-cell-item>
          <div class="g-header-message">
            <div>
              <p class="g-header-message-p1">
                剩余应还余额（元）<br />
                <b>3,500.00</b><br />
                截至还款日期 02-26
              </p>
              <span
                ><ynet-tag
                  size="large"
                  shape="square"
                  type="fill"
                  font-color="grey"
                >
                  本期已还清
                </ynet-tag>
              </span>
            </div>
            <div>
              <span>本期账单： <b>3,500.00</b></span>
            </div>
          </div>
        </div>
      </div>
      <!-- tab栏 -->
      <div class="g-tab">
        <ynet-tab-bar v-model="current" :items="items"></ynet-tab-bar>
      </div>
      <!-- 已出账单区域 -->
      <div class="g-list">
        <ul>
          <li>
            <div class="g-list-date">
              <span>上期未还</span>
            </div>
            <ynet-cell-item title="上期未还金额" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <span><b>+3,000.00</b></span>
              </template>
            </ynet-cell-item>
            <ynet-cell-item title="循环利息" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <span><b>+50.00</b></span>
              </template>
            </ynet-cell-item>
          </li>
          <li>
            <div class="g-list-date">
              <span>02月18日</span>
            </div>
            <ynet-cell-item title="全额提前还款" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <b>-2,100.00</b>
              </template>
            </ynet-cell-item>
            <ynet-cell-item
              title="自动还款20190110手续费"
              brief="长湘贷卡 尾号（1234）"
            >
              <template slot="right">
                <b>-100.00</b>
              </template>
            </ynet-cell-item>
            <ynet-cell-item
              title="20190110手续费"
              brief="长湘贷卡 尾号（1234）"
            >
              <template slot="right">
                <span><b>+100.00</b></span>
              </template>
            </ynet-cell-item>
          </li>
          <li>
            <div class="g-list-date">
              <span>02月15日</span>
            </div>
            <ynet-cell-item
              title="20190104本金到期"
              brief="长湘贷卡 尾号（1234）"
            >
              <template slot="right">
                <span><b>-2,000.00</b></span>
              </template>
            </ynet-cell-item>
            <ynet-cell-item
              title="20190104手续费"
              brief="长湘贷卡 尾号（1234）"
            >
              <template slot="right">
                <span><b>-100.00</b></span>
              </template>
            </ynet-cell-item>
          </li>
        </ul>
      </div>

      <!-- 未出账单区域 -->
      <div class="g-list isOnload">
        <ul>
           <li>
            <div class="g-list-date">
              <span>02月28日</span>
            </div>
            <ynet-cell-item title="20190408手续费" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <span>-2,100.00</span>
              </template>
            </ynet-cell-item>
            <ynet-cell-item title="20190210手续费" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <span>-100.00</span>
              </template>
            </ynet-cell-item>
            <ynet-cell-item title="20190202本金到期" brief="长湘贷卡 尾号（1234）">
              <template slot="right">
                <span><b>+100.00</b></span>
              </template>
            </ynet-cell-item>
          </li>
        </ul>
      </div>

      <!-- 按钮 -->
      <div class="g-button">
        <ynet-button type="warning">立即还款</ynet-button>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import { CellItem, TabBar, Button, Tag } from "ynet-mobile";
export default {
  components: {
    [CellItem.name]: CellItem,
    [TabBar.name]: TabBar,
    [Button.name]: Button,
    [Tag.name]: Tag
  },
  data() {
    return {
      current: 1,
      items: [
        { name: 1, label: "已出账单" },
        { name: 2, label: "未出账单" }
      ],
      isOnload : isActive
    };
  },
  methods: {
    // handleClick() {
      // 密码键盘
      // app.api.showKeyboard({
      //   keyboardType: 1,
      //   max: 6,
      //   isEncry: true,
      //   randomKey: '123hjkk',
      // }).then( res => {
      //   this.pwd = res.value
      // })
      // // 确认框
      // app.api.confirm('我很帅', '找个镜子', {
      //   okButton = '是的', 
      //   cancelButton = '非常帅'}
      // ).then( res => {
      //   if (res.ok) {

      //   } else {

      //   }
      // })
      // if (this.pwd === '') {
      //   app.api.showToast('坤豪真的很帅', 1);
      // } else if (this.name === '') {
      //   app.api.showToast('兄嘚请问贵姓', 2);
      // } else if (this.pwd !== this.oldPwd) {
      //   app.api.showToast('前后两次密码输入不一致', 2);
      // }
    // }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
